<template>
	<view class="my">
		
		<!-- <update></update> -->
		
		<view class="bg-box"></view>
		<view class="my-info">
			<view class="info-top">
				<view class="top-left">
					<!-- <image src="@/static/image/man.png" mode=""></image> -->
					<u-avatar size="50" src="../static/image/man.png"></u-avatar>
					<view class="left-count">
						<text style="color: #54b6ab;font-weight: bold;">{{userInfo.realName}}</text>
						<text>手机号: {{userInfo.telPhone}}</text>
					</view>
				</view>
				<view class="top-right">
					<u-icon name="bell" bold size="50rpx" @click="getInMessageList"></u-icon>
					<u-badge numberType="overflow" absolute :offset="[13,0]" type="error" max="99" :value="userInfo.notReadCount"></u-badge>
				</view>
			</view>
			<view class="info-peo">
				<view class="peo-header">
					<text style="font-weight: bold;">我的就诊人</text>
					<view @click="getInAddVisitor"><u-icon name="plus"></u-icon> 添加</view>
				</view>

				<view v-if="clientList.length===0" class="peo-list">
					<u-empty width="80" height="80" textSize="7" text="暂未添加就诊人" mode="data"
						icon="../static/image/data.png">
					</u-empty>
				</view>

				<view class="peo-list" v-for="item in clientList" :key="item.id" v-if="clientList.length>0">
					<text>{{item.realName}}</text>
					<text>{{item.relation}}</text>
					<text>{{item.sex===1?'男':'女'}}</text>
					<text>{{item.age}}岁</text>
					<text style="color: #54b6ab;" @click="toEdit(item)">修改</text>
					<text style="color: red;" @click="showDelete(item.id)">删除</text>
				</view>
			</view>
			<view class="info-nav" v-for="(item,index) in routerList" :key="index" @click="getInRoute(item.path)">
				<view class="nav-left">
					<u--image :src="item.icon" width="50rpx" lazy-load height="50rpx"></u--image>
					<text>{{item.name}}</text>
				</view>
				<view style="display: flex;align-items: center;color: #999;font-weight: bold;">
					<text v-show="item.title">{{item.title}}</text>
					<u-icon name="arrow-right" color="#ccc" bold size="18" v-show="item.path&&item.path!='1'"></u-icon>
				</view>
			</view>
		</view>

		<u-popup :show="quitDialog" position="bottom" :style="{ background: '#fff' }">
			<view class="popup-content">
				<text class="popup-title">确认退出吗？</text>
				<view class="popup-buttons">
					<u-button @click="quitDialog = false" :style="{ width: '40%',borderRadius:'10rpx' }">取
						消</u-button>
					<u-button type="primary" @click="getOut" :color="'#54b6ab'"
						:style="{ width: '40%' , borderRadius: '10rpx' }">确 认</u-button>
				</view>
			</view>
		</u-popup>

		<u-modal :show="deleteDialog" title="删除" content='确定删除该就诊人吗?' showCancelButton @confirm="deleteConfirm"
			@cancel="deleteDialog = false"></u-modal>
	</view>
</template>

<script>
	import global from '../common/global.js'
	export default {
		data() {
			return {
				deleteDialog: false,
				userInfo: {}, //用户信息
				clientList: [], //就诊人列表
				clientId: null, //就诊人id
				quitDialog: false,
				routerList: [{
						name: '预约医生记录',
						icon: '../static/image/over.png',
						path: '/pages/reservation'
					},
					{
						name: '通知设置',
						icon: '../static/image/about.png',
						path: '/pages/notice'
					},
					// {
					// 	name: '完善信息',
					// 	icon: '../static/image/my.png',
					// 	path: '/pages/information'
					// },
					{
						name: '关于我们',
						icon: '../static/image/aboutUs.png',
						path: '/pages/aboutUs'
					},
					{
						name: '版本信息',
						icon: '../static/image/dob.png',
						path: '1',
						title: 'V1.01'
					},
					{
						name: '退出',
						icon: '../static/image/quit.png',
						path: '2'
					},
				]
			}
		},
		watch: {
			"$store.state.websocketData":{
				handler(newVal, oldVal) {
					this.userInfo.notReadCount=this.userInfo.notReadCount+1
				},
			}
			// "$store.state.websocketData": function(val, oldval) {
			// 	this.getInfo()
			// }
		},
		onShow() {
			this.getInfo()
			
		},
		methods: {
			toEdit(obj){
				uni.navigateTo({
					url:'/pages/editVisitor?info='+encodeURIComponent(JSON.stringify(obj))
				})
			},
			showDelete(id) {
				this.clientId = id
				this.deleteDialog = true
			},
			//删除就诊人
			async deleteConfirm() {
				const {
					data
				} = await uni.$http.post('/patient-client/deleteById?id=' + this.clientId)
				if (data.code === 200) {
					this.getInfo()
					this.deleteDialog = false
				}

			},
			//添加就诊人
			getInAddVisitor() {
				uni.navigateTo({
					url: '/pages/addVisitor'
				})
			},
			//消息列表
			getInMessageList() {
				uni.navigateTo({
					url: '/pages/messageList'
				})
			},
			
			toEditInfo() {
				uni.navigateTo({
					url: '/pages/information'
				})
			},
			//获取个人信息
			async getInfo() {
				const {
					data
				} = await uni.$http.post('/user/getUserInfo')
				if (data.code === 200) {
					this.userInfo = data.data
					this.clientList = this.userInfo.clientList
					if(this.userInfo.notReadCount==0){
						uni.removeTabBarBadge({
							index:2
						})	
					} else {
						uni.setTabBarBadge({
							index: 2,
							text: this.userInfo.notReadCount+''
						})
					}
					
				}
			},
			//进入子页面
			getInRoute(val) {
				 if (val == '2') {
					//退出
					this.quitDialog = true
				} else {
					uni.navigateTo({
						url: val
					})
				}

			},
			//退出
			getOut() {
				this.quitDialog = false
				uni.$http.post('/user/logout').then(res => {
					if (res.data.code === 200) {
						uni.clearStorageSync()
						this.$store.commit('setUser', null);
						uni.navigateTo({
							url: '/pages/login'
						})
					}
				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	.my {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;

		.bg-box {
			width: 100%;
			height: 15%;
			background-color: #54b6ab;
		}

		.my-info {
			position: absolute;
			top: 5%;
			left: 50%;
			transform: translateX(-50%);
			width: 90%;

			.info-top {
				width: 100%;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: stretch;
				justify-content: space-between;

				.top-left {
					width: 90%;
					display: flex;
					align-items: stretch;
					justify-content: flex-start;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}

					.left-count {
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: space-around;
					}
				}

				.top-right {
					width: 10%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.info-peo {
				margin-top: 20rpx;
				width: 100%;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;

				.peo-header {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #666;

					view {
						display: flex;
					}
				}

				.peo-list {
					width: 100%;
					margin-top: 20rpx;
					padding: 10rpx 5rpx;
					box-sizing: border-box;
					background-color: #f2f2f2;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;

					text {
						font-size: 24rpx;
					}
				}
			}

			.info-nav {
				margin-top: 20rpx;
				width: 100%;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.nav-left {
					display: flex;
					align-items: center;

					text {
						margin-left: 20rpx;
						color: #666;
					}
				}

			}
		}

		.popup-content {
			padding: 50rpx;
			text-align: center;
		}

		.popup-title {
			font-size: 32rpx;
		}

		.popup-buttons {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
		}
	}
</style>